<template>
	<view class="score-detail">
		<!-- 商品图片 -->
		<swiper class="goods-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in goodsDetail.images" :key="index">
				<image :src="item" mode="aspectFill" class="goods-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="goods-name">{{goodsDetail.name}}</view>
			<view class="goods-score">
				<text class="score">{{goodsDetail.score}}</text>
				<text class="unit">积分</text>
			</view>
			<view class="goods-stock">库存: {{goodsDetail.stock}}件</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="goods-detail">
			<view class="section-title">商品详情</view>
			<rich-text :nodes="goodsDetail.description"></rich-text>
		</view>
		
		<!-- 兑换须知 -->
		<view class="exchange-rules">
			<view class="section-title">兑换须知</view>
			<view class="rules-content">
				<view class="rule-item">1. 兑换成功后，积分将立即扣除</view>
				<view class="rule-item">2. 每个用户限兑换{{goodsDetail.limitPerUser}}次</view>
				<view class="rule-item">3. 兑换成功后不支持退换</view>
				<view class="rule-item">4. 实物商品将在3个工作日内发出</view>
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="user-score">
				<text>我的积分：</text>
				<text class="score">{{userScore}}</text>
			</view>
			<button class="exchange-btn" :disabled="!canExchange" @click="handleExchange">
				{{exchangeBtnText}}
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const goodsId = ref('')
const goodsDetail = ref({})
const userScore = ref(0)

// 是否可以兑换
const canExchange = computed(() => {
	return userScore.value >= goodsDetail.value.score && goodsDetail.value.stock > 0
})

// 兑换按钮文字
const exchangeBtnText = computed(() => {
	if (goodsDetail.value.stock <= 0) {
		return '已售罄'
	}
	if (userScore.value < goodsDetail.value.score) {
		return '积分不足'
	}
	return '立即兑换'
})

// 获取商品详情
const getGoodsDetail = async () => {
	try {
		const res = await uni.request({
			url: `/api/score-mall/goods/${goodsId.value}`,
			method: 'GET'
		})
		goodsDetail.value = res.data
	} catch (e) {
		console.error('获取商品详情失败', e)
		uni.showToast({
			title: '获取商品详情失败',
			icon: 'none'
		})
	}
}

// 获取用户积分
const getUserScore = async () => {
	try {
		const res = await uni.request({
			url: '/api/user/score',
			method: 'GET'
		})
		userScore.value = res.data.score
	} catch (e) {
		console.error('获取用户积分失败', e)
	}
}

// 处理兑换
const handleExchange = async () => {
	if (!canExchange.value) return
	
	uni.showModal({
		title: '确认兑换',
		content: `确定要使用${goodsDetail.value.score}积分兑换该商品吗？`,
		success: async (res) => {
			if (res.confirm) {
				try {
					await uni.request({
						url: '/api/score-mall/exchange',
						method: 'POST',
						data: {
							goodsId: goodsId.value
						}
					})
					
					uni.showToast({
						title: '兑换成功',
						icon: 'success'
					})
					
					// 刷新积分和库存
					getUserScore()
					getGoodsDetail()
				} catch (e) {
					console.error('兑换失败', e)
					uni.showToast({
						title: '兑换失败',
						icon: 'none'
					})
				}
			}
		}
	})
}

onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	goodsId.value = currentPage.options.id
	
	getGoodsDetail()
	getUserScore()
})
</script>

<style lang="scss">
.score-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100px;
	
	.goods-swiper {
		width: 100%;
		height: 400rpx;
		
		.goods-image {
			width: 100%;
			height: 100%;
		}
	}
	
	.goods-info {
		background-color: #fff;
		padding: 20px;
		margin-bottom: 10px;
		
		.goods-name {
			font-size: 18px;
			color: #333;
			font-weight: bold;
		}
		
		.goods-score {
			margin-top: 10px;
			
			.score {
				color: #ff4d4f;
				font-size: 24px;
				font-weight: bold;
			}
			
			.unit {
				color: #999;
				font-size: 14px;
				margin-left: 5px;
			}
		}
		
		.goods-stock {
			margin-top: 10px;
			color: #999;
			font-size: 14px;
		}
	}
	
	.goods-detail, .exchange-rules {
		background-color: #fff;
		padding: 20px;
		margin-bottom: 10px;
		
		.section-title {
			font-size: 16px;
			color: #333;
			font-weight: bold;
			margin-bottom: 15px;
		}
		
		.rules-content {
			.rule-item {
				color: #666;
				font-size: 14px;
				line-height: 1.8;
			}
		}
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100px;
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 0 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		
		.user-score {
			flex: 1;
			font-size: 14px;
			color: #666;
			
			.score {
				color: #ff4d4f;
				font-weight: bold;
			}
		}
		
		.exchange-btn {
			width: 200rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #ff4d4f;
			color: #fff;
			border-radius: 40rpx;
			font-size: 16px;
			
			&:disabled {
				background-color: #ccc;
			}
		}
	}
}
</style> 